<template>
  <div>
    <header class="header">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="时间:">
          <el-date-picker
            class="datePicker"
            v-model="timevalue"
            type="daterange"
            @change="datePicker"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="search"
          >搜索</el-button
        >
      </el-form>
      <!-- <el-date-picker
        class="datePicker"
        v-model="timevalue"
        type="daterange"
        @change="datePicker"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
      <el-button type="primary" icon="el-icon-search" @click="search"
        >搜索</el-button
      > -->
    </header>
    <div class="body">
      <!-- <div class="btnFlag">
        <el-button type="warning" @click="update">进货更新</el-button>
      </div> -->
      <div class="unlod">
        <span style="display: inline-block">
          <download-excel
            :fields="exportDataStandard"
            :data="tableData"
            type="xls"
            :name="exportName"
            :defaultValue="exportDefaultValue"
            :fetch="createExportData"
            :before-generate="startDownload"
            :before-finish="finishDownload"
            worksheet="导出信息"
            class="uploadBtn"
          >
            <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
            <span><i class="el-icon-download"></i>下载明细</span>
          </download-excel>
        </span>
      </div>
      <el-table
        :data="tableData"
        border
        v-loading="loading"
        fit
        max-height="600"
        @selection-change="handleSelectionChange"
        style="width: 100%"
      >
        <el-table-column
          show-overflow-tooltip
          prop="ctime"
          label="日期"
          width="180"
        >
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="data" label="记录">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="mobile"
          label="记录人员电话"
          width="110"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="name"
          label="记录人员姓名"
          width="120"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="user_id"
          label="记录人员ID"
          width="100"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="sum"
          label="总计"
          width="120"
        >
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40, 50, 60]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import { kucun, uldata } from "../../../../utils/api";
export default {
  name: "inventory",
  data() {
    return {
      token: sessionStorage.getItem("token"),
      tableData: [],
      limit: 10,
      currentPage: 1,
      total: 0,
      timevalue: [],
      time: "",
      loading: true,

      exportDataStandard: {
        日期: "ctime",
        记录: "data",
        记录人员电话: "mobile",
        记录人员姓名: "name",
        记录人员ID: "user_id",
        总计: "sum",
      },
      exportName: "库存盘点",
      exportDefaultValue: " ",
    };
  },
  methods: {
    startDownload() {
      // console.log("数据开始")
    },
    finishDownload() {
      // console.log("数据下载完成")
    },
    createExportData() {
      return this.tableData;
    },
    handleSelectionChange() {},
    handleSizeChange(val) {
      this.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
    },
    datePicker(e) {
      this.time = "";
      if (e != null) {
        e.forEach((item) => {
          this.time += this.getNowTime(item) + ",";
        });
        this.time = this.time.slice(0, this.time.length - 1);
      } else {
        this.time = "";
      }
    },
    search() {
      this.currentPage = 1;
      this.getList();
    },
    getList() {
      kucun(this.token, this.currentPage, this.limit, this.time).then((res) => {
        if (res.data.status) {
          this.tableData = res.data.data.data;
          this.total = res.data.data.count;
          this.loading = false;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    getNowTime(time) {
      let date = new Date(time);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hour = date.getHours();
      let minute = date.getMinutes();
      let seconds = date.getSeconds();
      month = month < 10 ? "0" + month : month;
      day = day < 10 ? "0" + day : day;
      hour = hour < 10 ? "0" + hour : hour;
      minute = minute < 10 ? "0" + minute : minute;
      seconds = seconds < 10 ? "0" + seconds : seconds;
      return year + "-" + month + "-" + day;
    },
    // update(){
    //   this.$confirm('此操作将清空押金条退桶，是否继续?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(() => {
    //     uldata(this.token).then(res=>{
    //       if(res.data.status){
    //         this.$message({
    //           type: 'success',
    //           message: '操作成功!'
    //         });
    //       }
    //     })

    //   }).catch(() => {
    //     this.$message({
    //       type: 'info',
    //       message: '已取消操作'
    //     });
    //   });

    // },
  },
  mounted() {
    this.getList();
  },
};
</script>

<style scoped>
.body {
  margin: 20px 0;
}
/deep/.header {
  background: white !important;
  box-shadow: 0 5px 10px #ddd;
  min-height: 40px;
  display: flex;
  padding: 10px;
}
.datePicker {
  margin-right: 20px;
}
.btnFlag {
  float: left;
  margin: 10px auto;
}
.unlod {
  display: inline-block;
  float: right;
  margin: 10px auto;
  cursor: pointer;
  font-size: 14px;
}
</style>
